{% extends "director/index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script type="text/javascript">
    //	row_filters=
    //	placeholder =
    //	row_sort=
    //	heads=
    //	rows=
    //	row_pages =

    //	can_add=
    //	can_del=
    //	search_args=ex.parseSearch()
    //	search字段从 search_args._q 来取值

    heads[0].type='com_edit'
    layer_count=0
    table_logic={
        el:'#there',
        data:{
//		        heads:heads,
//		        rows:rows,
//		        row_filters:row_filters,
//		        row_sort:row_sort,
//		        row_pages:row_pages,
//		        placeholder:placeholder,
//		        selected:[],
//		        del_info:[],
//		        menu:menu,
//		        can_add:can_add,
//		        can_del:can_del,
//		        model:model,
//		        search_args:search_args,
//		        ex:ex,
        },
        mixins:[table_fun],
        watch:{
            'row_sort.sort_str':function (v) {
                this.search_args._sort=v
                this.search()
            }
        },
        methods:{
            open_layer:function(row){
                layer.open({
                    type: 1,
                    area: ['600px', '360px'],
                    shadeClose: true, //点击遮罩关闭
                    content:'<div id="text_panel"><text_panel :row="row"></text_panel></div>'
                });
                new Vue({
                    el:'#text_panel',
                    data:{
                        row:row,
                    }
                })

            }
        }

    }



    $(function () {
        table=new Vue(table_logic)




    })



</script>

{% block extra_head %}
{% endblock %}
<script type="text/javascript">


    var fields_url = location.pathname+'.edit'
    $.get(fields_url,function(resp){
        fields_heads  = resp.heads
    })
    Vue.component('text_panel',{
        props:['row'],
        mixins:[field_fun],
        template:'<div style="margin: 1em;"><div class="field-panel>"\
            <field  v-for="head in kw.heads" :key="head.name" :name="head.name" :kw="kw"></field>\
            </div></div>',
        data:function(){
            return {
                kw:{
                    heads:fields_heads,
                    row:this.row,
                    errors:{},
                },
            }
        }
    })

    Vue.component('com_edit',{
        template:'<b v-text="row[name]" @click="edit_me()"></b>',
        props:['name','row'],
        methods:{
            edit_me:function(){
                this.$root.open_layer(this.row)
            }
        }
    })
</script>

<!--<div id="text_panel" >-->
<!--<text_panel :row="row"></text_panel>-->
<!--</div>-->



<div id='there'>

    <button @click="open_layer()">jjyy</button>
    <ol v-if="page_label" class="breadcrumb">
        <b v-text="page_label"></b>
    </ol>
    <path-nav v-else :menu='menu'></path-nav>

    <div class='btn-panel flex flex-sb' style="padding-left:20px; ">

        <!--<div v-if="row_filters.length==0" class="flex-grow"></div>-->
        <com-filter class="flex" :heads="row_filters" :search="search_args"
                    :search_tip='search_tip' @submit="search()"></com-filter>
        <div class="flex-grow"></div>

        <com-table-btn v-if="!search_args._pop" :add_new="add_new" :del_item="del_item" :table_bus="this">
            {% block extra_btn %}
            {% endblock %}
        </com-table-btn>

        <!--<div class='btn-group' style='float: right;' v-if="!search_args._pop">-->
        <!--<a type="button" class="btn btn-success btn-sm" :href='add_new()' v-if='can_add' role="button">创建</a>-->
        <!--<button type="button" class="btn btn-danger btn-sm" @click='del_item()' v-if='can_del'>删除</button>-->
        <!--</div>-->

    </div>

    <com-table class='table fake-suit' :has_check="!search_args._pop" :map="map"
               :row_sort="row_sort" :heads="heads" :rows="rows" v-model="selected"></com-table>

    <!--<table class='table fake-suit'>-->
    <!--<thead>-->
    <!--<tr >-->
    <!--<th style='width:50px' v-if='!search_args._pop'>-->
    <!--<input type="checkbox" name="test" value=""/>-->
    <!--</th>-->
    <!--<th v-for='head in heads' :class='["td_"+head.name,{"selected":is_sorted(row_sort.sort_str ,head.name )}]'>-->
    <!--<span v-if='ex.isin(head.name,row_sort.sortable)' v-text='head.label' class='clickable' -->
    <!--@click='row_sort.sort_str = toggle( row_sort.sort_str,head.name)'></span>-->
    <!--<span v-else v-text='head.label'></span>-->
    <!--<sort-mark class='sort-mark' v-model='row_sort.sort_str' :name='head.name'></sort-mark>-->
    <!--</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody>-->
    <!--<tr v-for='row in rows'>-->
    <!--<td v-if='!search_args._pop'>-->
    <!--<input type="checkbox" name="test" :value="row.pk" v-model='selected'/>-->
    <!--</td>-->
    <!--<td v-for='head in heads' :class='"td_"+head.name'>-->
    <!--<a v-if='search_args._pop && head.name=="name"' href=";" @click="rt_win(row)" v-text="row['name']"></a>-->
    <!--<span v-else v-html='map(head.name,row)'></span>-->
    <!--</td>-->
    <!--</tr>-->
    <!--</tbody>-->
    <!--</table>-->


    <paginator :nums='row_pages.options' :crt='row_pages.crt_page' @goto_page='goto_page($event)'></paginator>


</div>
<style type="text/css" media="screen" id="test">
    /*.button-group{*/
    /*position: relative;*/
    /*display: inline-block;*/
    /*}*/
    /*.form-control{*/
    /*display: inline-block;*/
    /*margin-left:10px;*/
    /*width:auto;*/
    /*/!*height:30px;*!/*/
    /*}*/
    /*.sort-mark{*/
    /*float: right;*/
    /*}*/
    /*.selected{*/
    /*background-color: #DDD;*/
    /*}*/
    /*.clickable{*/
    /*cursor: pointer;*/
    /*font-size:120%;*/
    /*color: #0099CC;*/
    /*}*/
    /*.table tbody tr:nth-child(2n+1){*/
    /*background-color: #F5F5F5;*/
    /*}*/
    /*.table tbody tr:nth-child(2n){*/
    /*background-color: #F1F1F1;*/
    /*}*/

</style>
{% block extra %}
{% endblock %}
{% endblock %}